<template>
	<view>
		<view class="header"></view>
		<view class="title_button">
			<view class="title" @click="test(2)">最新资讯</view>
			<view class="button" @click="show()"></view>
		</view>
		
		<view class="content">
			<u-time-line>
					<u-time-line-item nodeTop="2" v-for="(item,index) in newList" :key="index" >
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node" style="background: #19be6b;" >
								<!-- 此处为uView的icon组件 -->
								<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-time">{{item.pubDateStr}}<text class="time" style="margin-left: 20rpx;">{{item.pubDate|getDate}}</text></view>
							<view  class="box">
								<view class="u-order-title">{{item.title}}</view>
								<view class="u-order-desc" @click='handleToNews(item.sourceUrl)'>{{item.summary}}...</view>
								
							</view>
							</view>
							
						</template>
					</u-time-line-item>
					
				</u-time-line>
		</view>
		
	</view>
</template>

<script>
	export default {
		filters:{
			getDate(data){
				// 获取当前系统时间
				let date = new Date(data);
				
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let hours = date.getHours();
				let minutes = date.getMinutes();
							
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				hours = hours > 9 ? hours : '0' + hours;
				minutes = minutes >9  ? minutes : '0' + minutes;
				return `${year}-${month}-${day} ${hours}:${minutes}`
				// return `${year}-${month}-${day}`;
			}
		},
		data() {
			return {
				newList:[],
				nowTime:0
			};
		},
		onLoad() {
			this.getList();
			
		},
		methods:{	
			handleToNews(e){
				plus.runtime.openURL(e)
			},
			show(){
				uni.navigateTo({
					url:'/pages/rumour/rumour'
				})
			},
			getList(){
				uni.request({
					url:'https://api.yonyoucloud.com/api/apis/dst/ncov1/query',
					header:{
						'appplication':'apicode',
						'apicode':'d2896e096d7d44deaddc1f081ca047c4'
					}
				}).then(res=>{
					this.newList=res[1].data.newslist[0].news;	
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.title_button{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.button{
			background: url("../../static/py.png");
			background-size: 100% 100%;
			width: 204rpx;
			height: 48rpx;
			margin: 10rpx 40rpx 0 0;
		}
		.title{
			color:#222;
			font-size: 40rpx;
			font-weight: 700;
			margin: 10rpx 0 0 40rpx;
			
		}
	}
	
	.box{
		background-color:  rgb(248, 248, 248);
		border-radius:2.4vw;
	}
	.header{
		height: 192rpx;
		background: url(https://mat1.gtimg.com/news/images/inews/2020/feiyan/area/news_head.png) 50%;
		background-size:cover;
	}
	.content{
		padding-top: 24rpx;
		width:90%;
		margin: 0 auto;
	}
.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		padding: 20rpx;
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		padding: 20rpx;
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		margin-bottom: 30rpx;
		font-weight: 700;
		color: #005dff;
		font-size: 26rpx;
	}
</style>